<template>
<div>
  <div style="background: #fff; padding: 10px 20px">
    <label style="font-size: 16px">请选择年份：</label>
    <el-select v-model="currentYear" placeholder="请选择" style="width: 90px" @change="changeYear">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
    <Row :gutter='20' style='margin-top: 10px'>
      <i-col :md='24' :lg='8' style='margin-bottom: 20px'>
        <Card shadow>
          <chart-pie
            style='height: 200px'
            :value='pieData'
            :center='pieCenter'
            text='职场经费'
            ref="pieChart"
          ></chart-pie>
        </Card>
      </i-col>
      <i-col :md="24" :lg="16" style="margin-bottom: 20px;">
        <Card shadow>
          <mul-bar ref="barChart1" style="height: 200px; width: 500px; margin: 0 auto;" :datas="budgetUsage1" text="职场经费使用情况"/>
        </Card>
      </i-col>
    </Row>
    <Row>
        <Card shadow>
          <mul-bar ref="barChart2" text='俱乐部经费使用情况' :datas='budgetUsage2' style="height: 400px;"/>
        </Card>
    </Row>
</div>
</template>

<script>
import { ChartPie, ChartBar } from '_c/charts'
import MulBar from '@/view/components/mulBar.vue'
export default {
  name: 'budget_page',
  components: {
    ChartPie,
    ChartBar,
    MulBar
  },
  data () {
    return {
      currentYear: '2021',
      pieCenter: ['50%', '60%'],
      pieData: [
        { value: 66200, name: '武汉' },
        { value: 54000, name: '深圳' },
        { value: 24400, name: '杭州' },
        { value: 21000, name: '上海' }
      ],
      budgetUsage1: {
        legend: ['已用', '未用'],
        xAxis: ['武汉', '深圳', '杭州', '上海'],
        yAxis: [
          ['23055', '18300', '5650', '5780'], ['43125', '35700', '18750', '15220']
        ],
        yName: '费用（元）',
        barColor: ['#D1EEEE', '#7D9EC0']
      },
      budgetUsage2: {
        legend: ['武汉', '深圳', '杭州', '上海'],
        xAxis: ['羽毛球', '乒乓球', '篮球', '游泳', '足球', '瑜伽', '舞蹈', '户外活动'],
        yAxis: [
          ['3055', '2000', '3000', '5000', '1000', '2000', '3000', '3000'],
          ['2000', '1500', '1900', '3600', '2300', '3000', '1800', '2200'],
          ['800', '950', '700', '650', '750', '600', '700', '500'],
          ['960', '790', '800', '600', '680', '720', '590', '640']
        ],
        yName: '费用（元）'
      },
      options: [
        { label: '2020', value: '2020' },
        { label: '2021', value: '2021' }
      ]
    }
  },
  methods: {
    changeYear () {
      if (this.currentYear === '2020') {
        this.pieData = [
          { value: 52200, name: '武汉' },
          { value: 48400, name: '深圳' },
          { value: 21000, name: '杭州' },
          { value: 19600, name: '上海' }
        ]
        this.budgetUsage1.yAxis = [
          ['48800', '46800', '19980', '18700'], ['3400', '1600', '1020', '900']
        ]
        this.budgetUsage2.yAxis = [
          ['5670', '5890', '6600', '6300', '4800', '5900', '6420', '7220'],
          ['5480', '6300', '6700', '5200', '5100', '6100', '6200', '5720'],
          ['2400', '2600', '2860', '2700', '2800', '2400', '2120', '2100'],
          ['2560', '2210', '2180', '2080', '2430', '2280', '2650', '2310']
        ]
      } else if (this.currentYear === '2021') {
        this.pieData = [
          { value: 66200, name: '武汉' },
          { value: 54000, name: '深圳' },
          { value: 24400, name: '杭州' },
          { value: 21000, name: '上海' }
        ]
        this.budgetUsage1.yAxis = [
          ['23055', '18300', '5650', '5780'], ['43125', '35700', '18750', '15220']
        ]
        this.budgetUsage2.yAxis = [
          ['251', '372', '193', '280', '130', '182', '102', '90'],
          ['209', '124', '153', '104', '73', '62', '72', '103'],
          ['15', '131', '301', '103', '138', '210', '142', '62'],
          ['123', '152', '103', '93', '68', '90', '79', '110']
        ]
      }
      this.$refs.pieChart.initChart()
      this.$refs.barChart1.initChart()
      this.$refs.barChart2.initChart()
    }
  },
  mounted () {
  }
}
</script>

<style scoped>

</style>
